<!--
 * @Description: 三级权限组织架构
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-09-14 14:36:27
 * @LastEditTime: 2024-03-28 18:35:36
 * @FilePath: \cscec-pms-admin\src\components\businessComponents\PermissionTreeOrganization\index.vue
-->
<template>
  <div class="permission-tree-organization">
    <a-input-search
      style="margin-bottom: 8px;margin-top:8px"
      placeholder="请搜索"
      @change="handleChange"
    />
    <div class="permission-tree-organization-tree">
      <a-spin :spinning="loading">
        <a-tree
          v-if="treeData.length > 0"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :tree-data="treeData"
          :replace-fields="replaceFields"
          :selected-keys="selectedKeys"
          @expand="handleExpand"
          @select="handleSelect"
        >
          <!-- <template
            v-if="node.tageCode === 'PD'"
            slot="title"
            slot-scope="node"
          >
            <span v-if="node[replaceFields.title].indexOf(searchValue) > -1">
              {{ node[replaceFields.title].substr(0, node[replaceFields.title].indexOf(searchValue)) }}<span
                style="color: #f50">{{ searchValue }}</span>{{ node[replaceFields.title].substr(node[replaceFields.title].indexOf(searchValue) + searchValue.length) }}
            </span>
            <span v-else>{{ node[replaceFields.title] }}</span>
          </template> -->
          <template
            slot="title"
            slot-scope="node"
          >
            <template v-if="node.tageCode === 'PD'">
              <span v-if="node[replaceFields.pdTilte].indexOf(searchValue) > -1">
                {{ node[replaceFields.pdTilte].substr(0, node[replaceFields.pdTilte].indexOf(searchValue)) }}<span
                  style="color: #f50">{{ searchValue }}</span>{{node[replaceFields.pdTilte].substr(node[replaceFields.pdTilte].indexOf(searchValue) +searchValue.length)}}
              </span>
              <span v-else>{{ node[replaceFields.pdTilte] }}</span>
            </template>
            <template v-else>
              <span v-if="node[replaceFields.title].indexOf(searchValue) > -1">
                {{ node[replaceFields.title].substr(0, node[replaceFields.title].indexOf(searchValue)) }}<span
                  style="color: #f50">{{ searchValue }}</span>{{node[replaceFields.title].substr(node[replaceFields.title].indexOf(searchValue) + searchValue.length)}}
              </span>
              <span v-else>{{ node[replaceFields.title] }}</span>
            </template>
          </template>
        </a-tree>
        <a-empty v-else />
      </a-spin>
    </div>
    <span
      v-if="showPermission"
      class="permission-tree-organization-btn"
      :style="{ right: collapsed ? 0 : right + 'px' }"
      @click="handleCollapsed"
    >
      <a-icon
        v-if="collapsed"
        type="caret-right"
      />
      <a-icon
        v-else
        type="caret-left"
      />
    </span>
  </div>
</template>
<script>
import { Empty } from 'ant-design-vue'
import { queryProjectTree,queryProjectTreeConditionQuery} from '@/api/subassembly/TreeSelectOrganization'
export default {
  name: 'PermissionTreeOrganization',
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    // 限制树级数,例如不需要显示项目层级传1，默认不限制
    levelLimit: {
      type: [Number, String],
      default: () => -1
    },
    // 是否显示展开收起
    showPermission: {
      type: Boolean,
      default: true
    },
    // 是否禁用父级，只启用末级
    parentDisabled: {
      type: Boolean,
      default: false
    },

    // 是否禁用没有子集的父级
    isSecondLevel : {
      type:Boolean,
      default:false
    },
    //对技术双优化效益指标特殊处理
    threeLevelAuthority: {
      type: Boolean,
      default: false
    },
    //是否成本三算分析项目
   isCostTree:{
    type: Boolean,
    default: false
  }
  },
  components: {
    AEmpty: Empty
  },
  data() {
    return {
      // 展开节点
      expandedKeys: [],
      defaultExpandedKeys: [],
      // 搜索值
      searchValue: '',
      // 自动展开父节点
      autoExpandParent: true,
      // 数据
      treeData: [],
      // 数据列表
      treeList: [],
      // 数据自动替换
      replaceFields: {
        children: 'childTree',
        title: 'orgName',
        pdTilte: 'projectName',
        key: 'orgId'
      },
      // 加载
      loading: true,
      // 选中项
      selectedKeys: [],
      right: -9,
      currentTag: '', //当前登录人项目层级
      orgId: this.$currentPost().orgId,
      projectId: this.$currentPost().projectId,
      // 数据映射
      dataMap: new Map(),
      // 搜索展开项
      expandMap: new Map()
    }
  },
  mounted() {
    this.getData()
    this.currentTag = JSON.parse(sessionStorage.getItem('ycloud-user_info'))?.currentPost?.code
  },
  methods: {
    /**
     * @description: 扁平化数据
     * @param {array} data
     * @return {void}
     */
    flatTree(tree, levels = 0) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        let level = levels
        node.level = level // 添加树层级
        const key = node[this.replaceFields.key]
        const title = node[this.replaceFields.title]
        node.scopedSlots = { title: 'title' }
        this.treeList.push({ [this.replaceFields.key]: key, [this.replaceFields.title]: title, projectName: node.projectName })
        this.dataMap.set(key, node)
        // 若限制层级则去除children
        if (level == this.levelLimit) {
          delete node[this.replaceFields.children]
          continue
        }
        if(level == 1 && node.childTree == null){
          this.isSecondLevel && (node.disabled = true)
        }
        if (node[this.replaceFields.children]) {
          level++
          this.parentDisabled && (node.disabled = true)
          this.flatTree(node[this.replaceFields.children], level)
        }
        
      }
    },
    /**
     * @description: 搜索父节点
     * @param {string} key
     * @param {array} tree
     * @return {void}
     */
    getParentKey(key, tree) {
      let parentKey
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node[this.replaceFields.children]) {
          if (node[this.replaceFields.children].some((item) => item[this.replaceFields.key] === key)) {
            parentKey = node[this.replaceFields.key]
          } else if (this.getParentKey(key, node[this.replaceFields.children])) {
            parentKey = this.getParentKey(key, node[this.replaceFields.children])
          }
        }
      }
      return parentKey
    },
    /**
     * @description: 查找父级节点
     * @param {map}
     * @return {void}
     */
    getParent(map) {
      const p = new Map()
      for (const value of map.values()) {
        if (this.dataMap.has(value?.parentId) && !this.expandMap.has(value.parentId)) {
          this.expandMap.set(value.parentId, this.dataMap.get(value.parentId))
          p.set(value.parentId, this.dataMap.get(value.parentId))
        }
      }
      if (p.size > 0) {
        this.getParent(p)
      }
    },
    /**
     * @description: 搜索改变
     * @param {void}
     * @return {void}
     */
    handleChange(e) {
      const value = e.target.value
      this.searchValue = value
      this.expandedKeys = []
      this.expandMap.clear()
      if ((value ?? '') !== '') {
        for (const item of this.dataMap.values()) {
          if (item[this.replaceFields.title]?.includes(value) || item[this.replaceFields.pdTilte]?.includes(value)) {
            if (this.dataMap.has(item?.parentId) && !this.expandMap.has(item.parentId)) {
              this.expandMap.set(item?.parentId, this.dataMap.get(item.parentId))
            }
          }
        }
        this.getParent(this.expandMap)
      }
      this.expandedKeys = Array.from(this.expandMap).map((el) => el[1][this.replaceFields.key])
      // this.expandedKeys = this.treeList
      //   .map((item) => {
      //     if ((item[this.replaceFields.title] || '').indexOf(value) > -1 || (item[this.replaceFields.pdTilte] || '').indexOf(value) > -1) {
      //       return this.getParentKey(item[this.replaceFields.key], this.treeData)
      //     }
      //     return null
      //   })
      //   .filter((item, i, self) => item && self.indexOf(item) === i)
      // this.searchValue = value
      // console.log(this.expandedKeys)
      // // Object.assign(this, {
      // //   expandedKeys,
      // //   searchValue: value,
      // //   autoExpandParent: true
      // // })
    },
    /**
     * @description: 获取数据
     * @param {void}
     * @return {void}
     */
    getData() {
      this.loading = true
      let api = this.isCostTree?queryProjectTreeConditionQuery:queryProjectTree;
      api()
        .then(({ code, data }) => {
          if (code === 200) {
            this.treeData = [data]
            this.flatTree(this.treeData)
            console.log(this.treeData,'this.treeData');
            if (this.threeLevelAuthority) {
              this.addScopedSlotsToArr(this.treeData)
              this.findParent(this.treeData, this.orgId, this.defaultExpandedKeys)
              if (this.currentTag != 'CO') {
                this.expandedKeys = this.defaultExpandedKeys
              }
              let projectIdAndOrgId = null
              if (this.currentTag == 'PD') {
                this.selectedKeys = [this.projectId]
                projectIdAndOrgId = this.projectId
              } else {
                this.selectedKeys = [this.orgId]
                projectIdAndOrgId = this.orgId
              }
              let obj = { currentTag: this.currentTag, orgId: projectIdAndOrgId }
              this.$emit('init', obj)
            } else {
              this.selectedKeys = [this.treeData[0][this.replaceFields.key]]
              this.$emit('init', this.treeData[0])
              this.$emit('select', this.treeData[0])
            }
            // this.$emit('select', this.treeData[0])
          } else {
            this.treeData = []
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 二次递归 只允许选择当前及下级
    addScopedSlotsToArr(tree, disabled = false) {
      if (['CO', 'BC', 'PD'].includes(this.currentTag)) {
        tree.forEach((item) => {
          if (!item.disabled) {
            if (this.currentTag != item.tageCode && !disabled) {
              // if(this.isAllowNnect) {
              item.disabled = true
              // }

              if (item.childTree && item.childTree.length) {
                this.addScopedSlotsToArr(item.childTree, false)
              }
            } else {
              if (item.childTree && item.childTree.length) {
                this.addScopedSlotsToArr(item.childTree, true)
              }
            }
          }
        })
      }
    },
    /**
     * @description: 节点展开收缩
     * @param {string} expandedKeys
     * @return {void}
     */
    handleExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    /**
     * @description: 树选择
     * @param {array} selectedKeys 选中key
     * @param {array} selectedNodes 选中节点
     * @return {void}
     */
    handleSelect(selectedKeys, { selectedNodes }) {
      this.selectedKeys = selectedKeys
      this.$emit('select', selectedNodes[0]?.data.props || {})
    },
    /**
     * @description: 收缩展开树
     * @param {void}
     * @return {void}
     */
    handleCollapsed() {
      this.$emit('update:collapsed', !this.collapsed)
    },
    //根据子节点找到父级点id集合
    findParent(data, target, result) {
      for (let i in data) {
        let item = data[i]
        if (item.orgId === target) {
          //将查找到的目标数据加入结果数组中
          //可根据需求unshift(item.id)或unshift(item)
          result.unshift(item.orgId)
          return true
        }
        if (item.childTree && item.childTree.length > 0) {
          let ok = this.findParent(item.childTree, target, result)
          if (ok) {
            result.unshift(item.orgId)
            return true
          }
        }
      }
      //走到这说明没找到目标
      return false
    }
  }
}
</script>
<style lang="less" scoped>
.permission-tree-organization {
  min-height: calc(var(--heightVh) - 300px);
  position: relative;
  transition: width 0.5s ease;
}

.permission-tree-organization-collapsed {
  width: 0;
}

.permission-tree-organization-tree {
  // overflow-x: hidden;
  overflow-y: auto;

  // height: calc(100vh - 300px);
  &::-webkit-scrollbar {
    background: #fff;
    width: 8px;
    height: 8px;
    // display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 8px;
    border-radius: 8px;
    border: 1px #fff solid;
    background: #ccc;
  }
}

.permission-tree-organization-btn {
  width: 10px;
  height: 58px;
  position: absolute;
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center;
  top: calc(var(--heightVh) * 0.5 - 184px);
  margin-top: -29px;
  cursor: pointer;
  overflow: hidden;

  .anticon {
    background-color: #f7f7f7;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: -3px;
    font-size: 14px;
  }
}
</style>

